<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt" %>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <jsp:include page="../header.jsp"></jsp:include>
    <style>
        .mui-badge {
            font-size: 18px;
            line-height: 1;
            display: inline-block;
            padding: 3px 8px;
            color: #ffffff;
            border-radius: 100px;
            background-color: rgba(0, 0, 0);
        }

        .mui-plus .plus {
            display: inline;
        }

        #topPopover .mui-popover-arrow {
            left: auto;
            right: 6px;
        }

        p {
            text-indent: 22px;
        }

        .mui-popover {
            height: 65%;
            width: 90%;
            z-index: 999;
            font-size: 14px;
        }

        .mui-popover form {
            font-size: 14px;
        }

        .mui-content {
            padding: 10px;
        }

        .mui-row label ~ input, .mui-input-row label ~ select, .mui-input-row label ~ textarea {
            /*float: left;*/
            margin-bottom: 0;
            padding-left: 0;
            border: 0;
            height: 30px;
        }
        select{
            height: 30px;
            padding: 5px;
            padding-left: 15px;
        }
        .mui-popover input {
            border-bottom: solid white 1px;
            height: 30px;
        }

        .mui-row {
            text-align: right;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">设备详情</h1>
</header>
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="javascript:void(0); " onclick="startDev('${info.id}')">
        <span class="mui-icon mui-icon-refresh"></span>
        <span class="mui-tab-label">开机</span>
    </a>
    <a class="mui-tab-item" href="javascript:void(0); " onclick="closeDev('${info.id}')">
        <span class="mui-icon mui-icon-close"></span>
        <span class="mui-tab-label">关机</span>
    </a>

    <a class="mui-tab-item" href="#middlePopover">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
    <a class="mui-tab-item" href="javascript:void(0); " onclick="forceDev('${info.id}')">
        <span class="mui-icon mui-icon-upload"></span>
        <span class="mui-tab-label">强冲</span>
    </a>
    <a class="mui-tab-item" href="javascript:void(0); " onclick="rechargeDev('${info.id}')">
        <span class="mui-icon mui-icon-plus"></span>
        <span class="mui-tab-label">充值</span>
    </a>
</nav>
<div class="mui-content">
    <div class="mui-card">
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        设备ID：${info.id}
                    </li>
                    <li class="mui-table-view-cell">
                        用户姓名：${info.userName}
                    </li>
                    <li class="mui-table-view-cell">
                        电话号码：${info.tel}
                    </li>
                    <li class="mui-table-view-cell">
                        详细地址：${info.address}
                    </li>
                    <li class="mui-table-view-cell">
                        设备状态：
                        <c:choose>
                            <c:when test="${info.devStatus eq 0}">
                                备用
                            </c:when>
                            <c:when test="${info.devStatus eq 1}">
                                待激活
                            </c:when>
                            <c:when test="${info.devStatus eq 2}">
                                出厂测试状态
                            </c:when>
                            <c:when test="${info.devStatus eq 3}">
                                正常制水
                            </c:when>
                            <c:when test="${info.devStatus eq 4}">
                                欠费
                            </c:when>
                            <c:when test="${info.devStatus eq 5}">
                                故障
                            </c:when>
                            <c:when test="${info.devStatus eq 6}">
                                关机
                            </c:when>
                            <c:when test="${info.devStatus eq 7}">
                                水满
                            </c:when>
                            <c:when test="${info.devStatus eq 8}">
                                缺水
                            </c:when>
                            <c:when test="${info.devStatus eq 9}">
                                漏水
                            </c:when>
                            <c:when test="${info.devStatus eq 10}">
                                滤芯待复位
                            </c:when>
                            <c:when test="${info.devStatus eq 11}">
                                硬件测试
                            </c:when>
                            <c:otherwise>
                                未知
                            </c:otherwise>
                        </c:choose>
                    </li>
                    <li class="mui-table-view-cell">
                        原水TDS：${info.rawTds}
                    </li>
                    <li class="mui-table-view-cell">
                        净水TDS：${info.purityTds}
                    </li>
                    <li class="mui-table-view-cell">
                        <c:choose>
                            <c:when test="${info.billTypeId eq 0}">
                                计费模式：流量
                            </c:when>
                            <c:when test="${info.billTypeId eq 1}">
                                计费模式：时长
                            </c:when>
                            <c:otherwise>
                                计费模式：买断
                            </c:otherwise>
                        </c:choose>

                    </li>
                    <li class="mui-table-view-cell">
                        安装时间：<fmt:formatDate value="${info.bindTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                    </li>
                    <li class="mui-table-view-cell">
                        已用流量：${info.usedFlow}L
                    </li>
                    <li class="mui-table-view-cell">
                        剩余流量：${info.remainFlow}L
                    </li>
                    <li class="mui-table-view-cell">
                        已用时长：${info.usedTime}天
                    </li>
                    <li class="mui-table-view-cell">
                        剩余时长：${info.remainTime}天
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="mui-card">
        <div class="mui-card-header">
                <span class="mui-text-left">
                   <h4>滤芯状态</h4>
                </span>
        </div>

        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <ul class="mui-table-view">
                    <c:forEach items="${devFilterList}" var="vo">
                        <li class="mui-table-view-cell " onclick="filterInit('${vo.id}','${vo.sort}')">
                            <div class="mui-table ">
                                <div class="mui-table-cell mui-col-xs-2">
                                    <span class="mui-badge mui-badge-primary">
                                            ${vo.sort}
                                    </span>
                                </div>
                                <div class="mui-table-cell mui-col-xs-6">
                                    <h4 class="mui-ellipsis">
                                            ${vo.filterInfo.name}
                                    </h4>
                                    <h5 class="mui-ellipsis">
                                            ${vo.filterInfo.description}
                                    </h5>
                                </div>
                                <div class="mui-table-cell mui-col-xs-4">
                                    <h4>${vo.maxValue-vo.used}/${vo.maxValue}</h4>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>

    </div>

</div>
<!--右下角弹出菜单-->
<div id="middlePopover" class="mui-popover">
    <div class="mui-popover-arrow"></div>
    <div class="mui-scroll-wrapper">
        <form id="inputForm" class="">
            <input id="devId" name="devId" type="hidden" value="${info.id}">
            <input id="imei" name="imei" type="hidden" value="${info.imei}">
            <input id="icCid" name="icCid" type="hidden" value="${info.imei}">
            <div class="mui-content">
                <div class="mui-input-row" style="text-align: center;">
                    <h4>设备参数设置</h4>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <label class="mui-table-view-cell">模式转换:</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <select id="gzms" name="gzms" class="mui-input-clear">
                            <c:choose>
                                <c:when test="${info.billTypeId eq 0}">
                                    <option value="1">时长</option>
                                    <option value="2">买断</option>
                                </c:when>
                                <c:when test="${info.billTypeId eq 1}">
                                    <option value="0">流量</option>
                                    <option value="2">买断</option>
                                </c:when>
                            </c:choose>

                        </select>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <label class="mui-table-view-cell">转换系数(升/天):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="ll2sc" type="text" value="${devSet.ll2sc}">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button type="button" class="mui-btn mui-btn-danger" onclick="chgGZMS()">确认</button>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7">
                        <label class="mui-table-view-cell">泵的工作时间(分钟):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="bgzsj" type="text" value="${devSet.pumpWorkTime}" placeholder="">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button class="mui-btn mui-btn-danger" type="button" onclick="chgBGZSJ()">确认
                        </button>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7" style="padding-right: 5px;">
                        <label>修改强制冲洗工作时间(秒):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="qzcxsj" value="${devSet.washTime}" name="washFixedTime" type="text"
                               class="mui-input-clear" placeholder="">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button type="button" class="mui-btn mui-btn-danger" onclick="chgQZCXSJ()">确认</button>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7  mui-col-xs-7 " style="padding-right: 5px;">
                        <label>修改定时冲洗参数(分钟):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="dscxcs" value="${devSet.washFixedTime}" name="washTime" type="text"
                               class="mui-input-clear" placeholder="">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button type="button" class="mui-btn mui-btn-danger" onclick="chgDSCXCS()">确认</button>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7" style="padding-right: 5px;">
                        <label>修改检修时间(分钟):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="jxsj" value="${devSet.serviceTime}" name="serviceTime" type="text"
                               class="mui-input-clear" placeholder="">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button type="button" class="mui-btn mui-btn-danger" onclick="chgJXSJ()">确认</button>
                    </div>
                </div>
                <div class="mui-row">
                    <div class="mui-col-sm-7 mui-col-xs-7" style="padding-right: 5px;">
                        <label>制1升水需要的时间(分钟):</label>
                    </div>
                    <div class="mui-col-sm-3  mui-col-xs-3" style="padding-right: 5px;">
                        <input id="oneWaterOfTime" value="${devSet.oneWaterOfTime}" name="serviceTime" type="text"
                               class="mui-input-clear" placeholder="">
                    </div>
                    <div class="mui-col-sm-2  mui-col-xs-2">
                        <button type="button" class="mui-btn mui-btn-danger" onclick="chgOneWaterOfTime()">确认</button>
                    </div>
                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-danger"
                            onclick="javascript:mui('#middlePopover').popover('hide');">关闭
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

</div>
</body>
<jsp:include page="../footer.jsp"></jsp:include>
<script>
    mui.init();
    mui(".mui-bar-tab").off("tap", "a")
    mui('.mui-scroll-wrapper').scroll();
    mui('body').on('shown', '.mui-popover', function (e) {

    });
    mui('body').on('hidden', '.mui-popover', function (e) {
    });

    function startDev(id) {
        var btnArray = ['否', '是'];
        mui.confirm('您确定开机吗?，确认？', '警告', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: base + "/distributor/devInfo/start/" + id,
                    dataType: "json",
                    success: function (data) {
                        mui.toast("开机成功");
                    },
                    fail: function () {
                        mui.toast("开机失败");
                    }
                });

            }
        })
    }

    function closeDev(id) {
        var btnArray = ['否', '是'];
        mui.confirm('您确定关机吗?，确认？', '警告', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: base + "/distributor/devInfo/stop/" + id,
                    dataType: "json",
                    success: function (data) {
                        mui.toast("关机成功");
                    },
                    fail: function () {
                        mui.toast("关机失败");
                    }
                });
            }
        })
    }

    function forceDev(id) {
        var btnArray = ['否', '是'];
        mui.confirm('您确定强冲吗?，确认？', '警告', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: base + "/distributor/devInfo/force/" + id,
                    dataType: "json",
                    success: function (data) {
                        mui.toast("强冲成功");
                    },
                    fail: function () {
                        mui.toast("强冲失败");
                    }
                });
            }
        })

    }

    function rechargeDev(id) {
        var btnArray = ['取消', '确定'];
        mui.prompt('请输入充值额度：', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: base + "/distributor/devInfo/addMoney/" + id + "/" + e.value,
                    dataType: "json",
                    success: function (data) {
                        mui.toast("充值成功" + e.value);
                    },
                    fail: function () {
                        mui.toast("充值失败");
                    }
                });
            } else {
                mui.toast("取消充值");
            }
        })
    }

    function filterInit(id, sort) {
        var btnArray = ['否', '是'];
        mui.confirm('您确定复位吗?，确认？', '警告', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: base + "/distributor/devInfo/filterInit/" + id + "/" + sort,
                    dataType: "json",
                    success: function (data) {
                        mui.toast("设置成功");
                    },
                    fail: function () {
                        mui.toast("设置失败");
                    }
                });

            }
        })
    }

    function chgGZMS() {
        $.ajax({
            url: base + "/distributor/devInfo/gzms/" + $("#devId").val() + "/" + $("#gzms").val()+"/"+$("#ll2sc").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }

    function chgBGZSJ() {
        $.ajax({
            url: base + "/distributor/devInfo/bgzsj/" + $("#devId").val() + "/" + $("#bgzsj").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }

    function chgDSCXCS() {
        $.ajax({
            url: base + "/distributor/devInfo/dscxcs/" + $("#devId").val() + "/" + $("#dscxcs").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }

    function chgJXSJ() {
        $.ajax({
            url: base + "/distributor/devInfo/jxsj/" + $("#devId").val() + "/" + $("#jxsj").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }
    function chgOneWaterOfTime() {

        $.ajax({
            url: base + "/distributor/devInfo/oneWaterOfTime/" + $("#devId").val() + "/" + $("#oneWaterOfTime").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }
    function chgQZCXSJ() {
        $.ajax({
            url: base + "/distributor/devInfo/qzcxsj/" + $("#devId").val() + "/" + $("#qzcxsj").val(),
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data.code == 0) {
                    mui('#middlePopover').popover('hide');
                    mui.toast("设置成功");
                } else {
                    mui.toast(data.msg);
                }
            },
            fail: function () {
                mui.toast("设置失败");
            }
        });
    }
</script>
</html>